.s-modal {
    display: -webkit-flex;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}

.s-mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: var(--modal-opacity));
}

.s-modal-center {
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: fixed;
    top: 50%;
    left: 50%;
}

// loading样式
.s-loading-block {
    padding: .8rem;
    min-width: 8.6rem;
    max-width: 60vw;
    height: 8.6rem;
    background-color: var(--loading-bg);
    border-radius: var(--modal-radiu);

    &.primary {
        background-color: var(--primary);
    }

    .s-loading-txt {
        width: 100%;
        padding: 0 1.2rem;
        font-size: 1.2rem;
        display: block;
        color: var(--primary-light);
    }
}

// alert与confirm样式
.s-alert-block {
    width: 90vw;
    background-color: var(--bg-color);
    border-radius: var(--modal-radiu);
    overflow: hidden;

    .s-alert-title {
        padding: var(--alert-padding);
        font-size: var(--alert-title-ft_size);
        color: var(--alert-title-color);
        background-color: var(--alert-title-bg);
    }

    .s-alert-context {
        padding: var(--alert-content-padding);
        font-size: var(--alert-content-ft_size);
        color: var(--alert-content-color);
        max-height: 70vh;
        overflow-y: auto;
    }

    .alert-btns {

        @include retina-border(1, 0, 0, 0, var(--border-color));

        .s-cell:last-child:not(:first-child) {
            min-width: 50%;
            max-width: 50%;
            box-sizing: border-box;
            @include retina-border(0, 0, 0, 1, var(--border-color));
        }

        .alert-btn {
            display: block;
            padding: var(--alert-btn-padding, var(--alert-padding, 1.2rem));
            text-align: center;
            color: var(--alert-btn-color);
            font-size: var(--alert-btn-ft_size);
            box-sizing: border-box;
            width: 100%;
            line-height: 1;
            border: 0;
            outline: 0;
            background-color: transparent;
        }

        .alert-confirm-btn {
            color: var(--primary);
        }
    }

    &.dark {
        .alert-confirm-btn {
            color: var(--primary-dark);
        }
    }

    &.warning {
        .alert-confirm-btn {
            color: var(--warning-dark);
        }
    }

    &.success {
        .alert-confirm-btn {
            color: var(--success-dark);
        }
    }

    &.error {
        .alert-confirm-btn {
            color: var(--error-dark);
        }
    }
}

// toast样式
.s-toast-block {
    padding: .8rem;
    min-width: 8.6rem;
    max-width: 80vw;
    background-color: var(--loading-bg);
    border-radius: var(--modal-radiu);
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
}